<template>
  <div class="all">
    <div class="sentence">时间是一切财富中最宝贵的财富</div>
    <h1>{{state.switchtitle}}</h1>
    <div class="Login-interface">
      <van-form @submit="onSubmit" v-if="state.isShow" style="margin: 1rem auto;">
        <van-cell-group inset>
          <van-field v-model="state.username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 20px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
          <p class="register" @click="isLoginRegister">没有账号？点击注册</p>
        </div>
      </van-form>

      <van-form @submit="onSubmit"  v-else style="margin: 1rem auto;">
        <van-cell-group inset  >
          <van-field v-model="state.username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <van-field v-model="state.password1" type="password1" name="确认密码" label="确认密码" placeholder="再次填写密码"
            :rules="[{ required: true, message: '请再次填写密码' }]" />
        </van-cell-group>
        <div style="margin: 20px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
          <p class="register" @click="isLoginRegister">已有账号？点击登录</p>
        </div>
      </van-form>
    </div>
    <div class="language">
      <p class="languages-content">
        <a> English </a>
        <a> 日本語 </a>
        <a> 简体中文 </a>
        <a> 繁體中文 </a>
      </p>

      <p class="tag1"> Copyright
        <i></i> MY.blog
      </p>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@/api';
import {showFailToast,showSuccessToast} from 'vant'

const router = useRouter()
const state = reactive({
  isShow: true,
  username: '',
  password: '',
  password1: '',
  switchtitle:'登录'
})


// 点击登录，注册
// 注册有点小bug，头像，个性签名不能为空
const onSubmit = async() => {
  if (state.isShow) {
    const res=await axios.post('/users/login', {
      username: state.username,
      password: state.password
    })
    // console.log(res);
    if (res.code==='8000') {
      sessionStorage.setItem('useInfo',JSON.stringify(res.data))
      router.push('/bloghome' )
    }
    
  }
  else{
      if (state.password===state.password1) {
        const data=await axios.post('/users/register',{
        username:state.username,
        password:state.password,
        nickname:state.username
      })  
      if (data.code==='80000'&&data.status===200) {
        showSuccessToast(data.msg)
        // console.log(data.msg);
          state.isShow=true
      }
      
      }else{
        showFailToast('密码输入不相同')
      }
    }
}

// 切换登录和注册
const isLoginRegister = () => {
  state.isShow = !state.isShow
  if (state.isShow) {
    state.switchtitle='登录'
  }else{
    state.switchtitle='注册'
  }
}
</script>

<style lang="less" scoped>
.all {
  width: 100vw;
  height: 100vh;
  

  h1 {
    text-align: center;
    font-size: 30px;
    padding: 0.5rem 0;
    font-weight: bold;
  }

  .sentence {
    text-align: center;
    font-size: 15px;
    padding: 0.5rem 0;
    width: auto;
  }

  .Login-interface {
    border: 1px solid #bbbbbb;
    border-radius: 0.3rem;
    margin: 0 0.5rem;
    height: auto;
    box-shadow: 0 0 0.533rem 0 #aaaaaa;
    .register {
      font-size: 15px;
      color: #606266;
      text-align: center;
      margin: 0.5rem 0;
    }
  }

  .language {
    color: #606266;
    font-size: 12px;
    // display: flex;
    
    // bottom: 1rem;
    // left: 50%;
    // width: auto;
    // transform: translateX(-50%);
    
    .languages-content {
      display: inline-block;
      height: 0.5rem;
      margin: 3rem 1.77rem 0 1.77rem;
      display: flex;
      justify-content: space-around;
    }
    .tag1{
      text-align: center;
      }
  }
}
</style>